<template>
  <scroll-view class="record_outer" @scrolltolower="refreshList" :scroll-y="true">
    <view class="record_header">
      <u-navbar @rightClick="isShowDatetimePicker = true" :autoBack="true" height="152rpx" bgColor="#FFFAEF" :fixed="true"
        :border="true" :placeholder="true">
        <view slot="left" class="record_header_back">
          <image src="@/static/record/goback.png"></image>
        </view>
        <view slot="center" class="record_header_title">交换记录</view>
        <view slot="right" class="record_header_date"><text>{{ $u.timeFormat(this.dateValue, "yyyy年mm月") }}</text><text
            class="iconfont">&#xe771;</text></view>
      </u-navbar>
    </view>
    <view class="capitalTransfer_content">
      <view class="capitalTransfer_content_select">
        <view v-for="(item, index) in selectList" :key="item.id" @click="changeSelectIndex(item.id)">
          <image src="@/static/capitalTransfer/select.png" v-if="selectIndex == index"></image>
          <image src="@/static/capitalTransfer/noselect.png" v-if="selectIndex != index"></image>
          <text :class="selectIndex == index ? 'active' : ''">{{
            item.name
          }}</text>
        </view>
      </view>
    </view>
    <view class="record_list">
      <view class="record_list_item" v-for="(item, index) in recordList" :key="index">
        <view class="record_list_item_top">
          <view class="record_list_item_top_text">
            <text v-if="item.exchangeType == 1">云豆 换 钻石 </text>
            <text v-if="item.exchangeType == 2">钻石 换 云豆</text>
          </view>
          <view class="record_list_item_top_img" @click="goOrderDetailPage(item)">
            <image src="@/static/record/detail.png"></image>
          </view>
        </view>
        <view class="record_list_item_center">
          <view class="record_list_item_center_left">
            <text v-if="item.exchangeType == 2">总交换（钻石）</text>
            <text v-if="item.exchangeType == 1">总交换（云豆）</text>
          </view>
          <view class="record_list_item_center_center">
            <text v-if="item.status == 1">交换中</text>
            <text v-if="item.status == 2">成功交换{{
              item.exchangeType == 2 ? "（云豆）" : "（钻石）"
            }}</text>
            <text v-if="item.status == 3">交换失败</text>
          </view>
          <view class="record_list_item_center_left_right"><text>日期</text></view>
        </view>
        <view class="record_list_item_down">
          <view class="record_list_item_down_left" v-if="item.exchangeType == 2"><text>{{ (item.consumed / 1000).toFixed(3)
          }}k</text></view>
          <view class="record_list_item_down_left" v-if="item.exchangeType == 1"><text>{{ item.consumed }}</text></view>
          <view class="record_list_item_down_center" v-if="item.exchangeType == 2 && item.status == 2"><text>{{ item.obtained
          }}</text></view>
          <view class="record_list_item_down_center" v-if="item.exchangeType == 1 && item.status == 2">
            <text>{{ (Math.floor(item.obtained) / 1000).toFixed(3) }}k</text></view>
          <view class="record_list_item_down_right"><text>{{ item.createdAt | showTime }}</text></view>
        </view>
      </view>
    </view>
    <u-datetime-picker :show="isShowDatetimePicker" v-model="dateValue" mode="year-month"
      @cancel="isShowDatetimePicker = false" @confirm="confirmChangeDate"></u-datetime-picker>
  </scroll-view>
</template>

<script>
import "./recordIconfont/iconfont.css";
import { reqExchangeRecordList } from "@/api/record.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 是否展示日期选择框
      isShowDatetimePicker: false,
      // 选择的日期
      dateValue: Number(new Date()),
      // 选择的日期
      selectDateValue: "",
      // 选择哪种兑换种类的下标
      selectIndex: 0,
      //  兑换种类列表
      selectList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "云豆换钻石",
        },
        {
          id: 2,
          name: "钻石换云豆",
        },
      ],
      // 页码
      pageNum: 1,
      // 交换列表
      recordList: [],
      // 交换列表总数
      recordListTotal: 0,
    };
  },
  onLoad() {
    this.confirmChangeDate();
  },
  methods: {
    ...mapMutations(["setorderDetail"]),
    // 跳转交换记录详情页
    goOrderDetailPage(data) {
      this.setorderDetail(data);
      uni.navigateTo({
        url: `/pages/orderDetail/index`,
      });
    },
    // 确定修改选择时间
    confirmChangeDate(e) {
      let selectDateStr = e ? e.value : this.dateValue;
      const resultDate = uni.$u.timeFormat(selectDateStr, "yyyy-mm");
      this.pageNum = 1
      this.selectDateValue = resultDate;
      this.isShowDatetimePicker = false;
      this.getExchangeRecordList();
    },
    // 切换资产种类
    changeSelectIndex(id) {
      this.selectIndex = id;
      this.pageNum = 1
      this.getExchangeRecordList();
    },
    // 到底后刷新列表
    refreshList() {
      if (this.recordList.length >= this.recordListTotal) {
        uni.showToast({
          title: "没有更多了",
          icon: "error",
        });
      } else {
        this.pageNum++;
        this.getExchangeRecordList(1);
      }
    },
    // 交换记录
    async getExchangeRecordList(val) {
      const sendData = {
        pageNum: this.pageNum,
        pageSize: 10,
        exchangeType: this.selectIndex,
        date: this.selectDateValue,
      };
      const result = await reqExchangeRecordList(sendData);
      if (result.code == 200) {
        if (val != 1) {
          this.recordList = result.data.list;
        } else {
          this.recordList = this.recordList.concat(result.data.list);
        }
        this.recordListTotal = result.data.total;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
  },
  filters: {
    showTime(time) {
      return time.split(" ")[0];
    },
  },
};
</script>

<style lang="scss" scoped>
.record_outer {
  width: 100vw;
  height: 100vh;
  background: #fffaef;

  .record_header {
    .record_header_title {
      font-size: 46rpx;
      font-family: DreamHanSansSC;
      font-weight: 600;
      color: #302b26;
    }

    .record_header_date {
      width: 199rpx;
      height: 48rpx;
      background: #f5f0e5;
      border: 1px solid #ffa814;
      border-radius: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 25rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #ffa814;
      }
    }

    .record_header_back {
      width: 46rpx;
      height: 46rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .capitalTransfer_content {
    border-top: 2rpx solid rgba(183, 178, 169, 0.35);
    height: 100rpx;
    background: #fffaef;
    position: fixed;
    width: 100%;
    z-index: 100;

    .capitalTransfer_content_select {
      display: flex;
      align-items: center;
      column-gap: 50rpx;
      margin-left: 44rpx;
      margin-top: 42rpx;

      view {
        display: flex;
        align-items: center;
        column-gap: 10rpx;
      }

      image {
        width: 34rpx;
        height: 34rpx;
      }

      text {
        font-size: 28rpx;
        font-family: DreamHanSansSC;
        font-weight: 800;
        color: rgb(90, 88, 84, 0.6);
      }

      .active {
        color: #37322c;
      }
    }
  }

  .record_list {
    width: 100%;
    margin-top: 100rpx;

    .record_list_item {
      width: 750rpx;
      height: 228rpx;
      background: #fffaef;
      border: 2rpx solid rgba(183, 178, 169, 0.35);

      .record_list_item_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;

        .record_list_item_top_text {
          margin-left: 44rpx;

          text {
            font-size: 28rpx;
            font-family: DreamHanSansSC;
            font-weight: 600;
            color: #37322c;
          }
        }

        .record_list_item_top_img {
          width: 38rpx;
          height: 38rpx;
          margin-right: 46rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .record_list_item_center {
        margin-top: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .record_list_item_center_left {
          margin-left: 44rpx;
        }

        .record_list_item_center_center {
          display: flex;
          justify-content: center;
        }

        .record_list_item_center_left_right {
          margin-right: 46rpx;
          display: flex;
          justify-content: flex-end;
        }

        view {
          width: 33%;
        }

        text {
          font-size: 25rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #6c6862;
        }
      }

      .record_list_item_down {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14rpx;

        .record_list_item_down_left {
          margin-left: 44rpx;
          width: 30%;
        }

        .record_list_item_down_center {
          display: flex;
          justify-content: center;
          width: 40%;
          text-align: center;
        }

        .record_list_item_down_right {
          margin-right: 46rpx;
          display: flex;
          justify-content: flex-end;
          width: 30%;
          word-wrap: break-word;
          margin-left: 40rpx;
        }

        view {}

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322c;
        }
      }
    }
  }
}</style>
